<template>
	<view>
		<cu-custom :bgColor="'bg-' + theme.themeColor" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{pageDesign.pageName}}</block>
		</cu-custom>
		<view v-if="!loading">
			<view v-for="(item,index) in pageDesign.pageContent.componentsList">
				<!-- 图片广告 -->
				<template v-if="item.name == 'image'">
					<diy-image :showData="item.data"></diy-image>
				</template>
				<!-- 商品 -->
				<template v-if="item.name == 'goods'">
					<diy-goods :showData="item.data"></diy-goods>
				</template>
				<!-- 公告 -->
				<template v-if="item.name == 'notice'">
					<diy-notice :showData="item.data"></diy-notice>
				</template>
				<!-- 图文导航 -->
				<template v-if="item.name == 'tabNav'">
					<diy-tabnav :showData="item.data"></diy-tabnav>
				</template>
				<!-- 魔方 -->
				<template v-if="item.name == 'magicSquare'">
					<diy-magicsquare :showData="item.data"></diy-magicsquare>
				</template>
			</view>
			<view class="cu-load bg-gray over">
			</view>
		</view>

	</view>
</template>

<script>
	import config from 'config/env';
	import {
		getById
	} from '@/api/pagedesign.js';
	import diyImage from 'components/diy-page/diy-image/index';
	import diyMagicsquare from 'components/diy-page/diy-magicsquare/index';
	import diyGoods from 'components/diy-page/diy-goods/index';
	import diyNotice from 'components/diy-page/diy-notice/index';
	import diyTabnav from 'components/diy-page/diy-tabnav/index';
	export default {
		components: {
			diyImage,
			diyGoods,
			diyNotice,
			diyMagicsquare,
			diyTabnav,
		},
		data() {
			return {
				loading: true,
				theme: getApp().globalData.theme, //主题
				id: '',
				pageDesign: {}
			};
		},
		onLoad(props) {
			getApp()
				.initPage({
					isTabar: true
				})
				.then(res => {
					this.id = props.id;
					this.getPageDesign();
				});
		},
		onPullDownRefresh() {
			uni.showNavigationBarLoading();
			this.getPageDesign();
			// 停止下拉动作
			uni.hideNavigationBarLoading();
			// 停止当前页面的下拉刷
			uni.stopPullDownRefresh();
		},
		methods: {
			getPageDesign() {
				this.loading = true;
				getById(this.id).then(response => {
					this.loading = false;
					if (response.data) {
						this.pageDesign = response.data;
					} else {
						return uni.showModal({
							title: '提示',
							content: "页面不存在或已删除",
							success(res) {}
						});
					}
				})
			},



		}
	};
</script>
<style lang="scss">
	.swiper-item {
		height: 150px !important;
		border-radius: 8px !important;
	}

	.screen-swiper {
		min-height: 150px !important;
	}

	.swiper-bg {
		width: 100vw;
		height: 140px;
		border-radius: 0 0 50px 50px;
	}
</style>
